<template>
    <div class="theme-info">
      <div class="inner ">
          <div class="thumbs-box">
              <img class="thumbs" :src="$Url+data.image" alt="img">
              <div class="mask clearfix" :class="{activeing: data.status === 1, finish: data.status === 2}">
                 <p class="float-left">
                     <span v-if="data.status == 2"><img src="./img/hot.png" alt="">{{data.start_status}}</span>
                     <span v-if="data.status == 1"><img src="./img/end.png" alt="">{{data.start_status}}</span>
                 </p>
                 <p class="float-right">
                    <span class="count">已有 {{data.num}} 报名</span>
                    <span class="btn">查看</span>
                 </p>
              </div>
          </div>
          <div class="option clearfix">
              <span class="time">发布时间：{{data.addtime | formatDate}}</span>
              <div class="button-box">
                    <span class="btn" v-if="type===3" @click="showy" :class="{'active':show ===true}" style="cursor: pointer">原因</span>
                    <span class="btn " style="cursor: pointer" @click="bianji(data.id)">编辑</span>
                    <span class="btn" @click="del(data.id)" style="cursor: pointer">删除</span>
              </div>
          </div>
          <div class="reason-box" v-if="type===3 && show === true">
              <div class="reason">
                  <p> <span class="pink">为通过审核的原因：</span>{{data.reward}}</p>
                  <p> <span class="pink">再次强调：</span>{{data.reward}}</p>
                  <p style="text-align: right"> {{data.endtime | formatDate}}</p>
              </div>
          </div>
      </div>
    </div>
</template>

<script>
    /***
     * @data
     * @type 调用类型
     * type = 1 列表调用
     * type = 2 审核列表调用
     * type = 3 投诉列表调用
     *
     */
    export default {
        name: "ThemeItem",
        props: {
          data: {
              type: Object,
          },
            type: {
              type: Number
            }
        },
        data () {
            return {
                show:false
            }
        },
        filters:{
            formatDate:function(time){
                var date = new Date(time * 1000);
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
                var D = date.getDate() + ' ';
                var h = date.getHours() + ':';
                var m = date.getMinutes() + ':';
                var s = date.getSeconds();
                return Y+M+D+h+m+s;
            },
        },
        methods :{
            del (id) {
                let _this =this
                _this.$post('/api/activity/delActivity',
                    {
                        activity_id:id,
                    }, function (res) {
                        _this.$message.success(res.msg);
                        _this.$emit('delect',1)

                    }, function (errcode, errmsg,err) {
                        console.log(err)
                        console.log(errmsg)
                    })
            },
            showy () {
               this.show =! this.show
            },
            bianji (id) {
                this.$router.push({path:'/my/mytheme/publishact',query:{id:id}})
            }
        }
    }
</script>

<style  lang="less" scoped>
    @import "../../style/style.less";
    .theme-info{
        .inner {
            padding: 20px 0 0;
            .thumbs-box {
                border: 1px solid @border-color;
                line-height: 1;
                font-size: 0;
                padding: 10px;
                position: relative;
                .thumbs {
                    width: 100%;
                    height: 226px;
                    border-radius: 10px;
                }
                .mask {
                    position: absolute;
                    bottom: 10px;
                    left: 10px;
                    width: 646px;
                    height: 42px;
                    line-height: 42px;
                    border-bottom-left-radius: 10px;
                    border-bottom-right-radius: 10px;
                    background-color: rgba(0,0,0,.6);
                    font-size: 18px;
                    padding: 0 20px;
                    color: #fff;
                    span {
                        display: inline-block;
                        img {
                            display: inline-block;
                            vertical-align: middle;
                            margin-right: 6px;
                        }
                    }
                    .count {
                        color: #fff;
                    }
                    .btn {
                        height: 28px;
                        line-height: 28px;
                        background-color: @theme-color-dark;
                        border-bottom: 2px solid #f4162d;
                        border-radius: 4px;
                        padding: 0 10px;
                        margin-left: 6px;
                        color: #fff;
                        cursor: pointer;
                    }
                }
                .activeing {
                    color: #fcbe11;
                }
                .finish {
                    color: #999;
                    .btn {
                        background-color: #999!important;
                        border-bottom-color:  #999!important;
                    }
                    .count {
                        color: #999;
                    }
                }
            }
           .option {
                    margin-top: 10px;
                    .time {
                        color: #666;
                        font-size: 14px;
                    }
                    .button-box {
                        float: right;
                        .btn {
                            display: inline-block;
                            height: 28px;
                            line-height: 28px;
                            padding: 0 24px;
                            font-size: 14px;
                            color: @theme-color-dark;
                            border:1px solid @theme-color-dark;
                            border-radius: 4px;
                            margin-right: 40px;
                        }
                        .active {
                            position: relative;
                            &:after {
                                content: '';
                                display: inline-block;
                                border: 1px solid @theme-color;
                                width: 8px;
                                height: 8px;
                                position: absolute;
                                bottom: -10px;
                                left: 28px;
                                background: #fff;
                                border-right-color: transparent;
                                border-bottom-color: transparent;
                                transform:rotate(45deg);
                                -ms-transform:rotate(45deg); 	/* IE 9 */
                                -moz-transform:rotate(45deg); 	/* Firefox */
                                -webkit-transform:rotate(45deg); /* Safari 和 Chrome */
                                -o-transform:rotate(45deg);
                            }
                        }
                    }
                }
            .reason-box {
                padding: 5px 10px 10px;
                width: 100%;
                .reason {
                    padding: 10px;
                    border: 1px solid @theme-color;
                }
            }
        }
    }

</style>